/**
 * Created by dazq on 16/11/28.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TextInput,
    TouchableHighlight,
    Image,
Alert
} from 'react-native';

import { Router, Scene ,Actions } from 'react-native-router-flux';
import GiftedListView from 'react-native-gifted-listview'
import SearchBar from 'react-native-material-design-searchbar';

export default class Index extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        _renderRowView = this._renderRowView.bind(this)
    }
    _onFetch(page = 1, callback, options) {
        setTimeout(() => {
            var rows = ['产品 '+((page - 1) * 3 + 1), '产品 '+((page - 1) * 3 + 2), '产品 '+((page - 1) * 3 + 3)];
            if (page === 6) {
                callback(rows, {
                    allLoaded: true, // the end of the list is reached
                });
            } else {
                callback(rows);
            }
        }, 1000); // simulating network fetching
    }
    _renderRowView(rowData) {
        return (
            <TableViewCell name={rowData} onlinUser="100" dayUser="200" dayNetUser="498" allRegisterUser="4564"/>
        );
    }
    _renderHeaderView(){
        return(
            <View style={styles.header}>
                <SearchBar
                    onSearchChange={(event) => console.log(`On Focus ${event.nativeEvent.text}`)}
                    height={25}
                    onFocus={() => console.log('On Focus')}
                    onBlur={() => console.log('On Blur')}
                    placeholder={'Search...'}
                    autoCorrect={false}
                    padding={5}
                    returnKeyType={'search'}
                />
            </View>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.navBar} />
                <GiftedListView
                    headerView={this._renderHeaderView}
                    rowView={this._renderRowView}
                    onFetch={this._onFetch}
                    firstLoader={true} // display a loader for the first fetching
                    pagination={true} // enable infinite scrolling using touch to load more
                    refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                    withSections={false} // enable sections
                    customStyles={{
            paginationView: {
              backgroundColor: '#eee',
            },
            actionsLabel:{
                fontSize:14
            }
          }}

                    refreshableTintColor="black"
                    renderSeparator={()=>(<View style={{height:1,backgroundColor:'gray'}}></View>)}
                />
            </View>
        );
    }
}

class TableViewCell extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
      }
    /**
     * When a row is touched
     * @param {object} rowData Row data
     */
    _onPressRow() {
        Actions.tab({type:'replace'});
    }

    render(){
        return(
            <TouchableHighlight onPress={()=>(this._onPressRow())} underlayColor="#F5F5F5">
                <View style={cellStyles.container}>
                    <View style={cellStyles.imageView}>
                        <Image
                            style={cellStyles.icon}
                            source={require('../src/icon.jpeg')}
                        />
                    </View>
                    <View style={{flex:2}}>
                        <Text style={cellStyles.textS}>{this.props.name}</Text>
                        <Text style={cellStyles.onlineUser}>在线用户数:<Text style={cellStyles.green}>{this.props.onlinUser}</Text></Text>
                        <Text style={cellStyles.dayUser}>在线用户数:<Text  style={cellStyles.green}>{this.props.dayUser}</Text></Text>
                    </View>
                    <View style={{flex:2}}>
                        <Text style={cellStyles.dayNetUser}>日联网用户数:<Text  style={cellStyles.green}>{this.props.dayNetUser}</Text></Text>
                        <Text style={cellStyles.allRegisterUser}>累计注册用户:<Text  style={cellStyles.green}>{this.props.allRegisterUser}</Text></Text>
                    </View>
                </View>
            </TouchableHighlight>
        )
    }
}
const cellStyles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row",
        height:100,
        alignItems:'center',
        left:10
    },
    green:{
        color:'green'
    },
    textS:{
        left:10,
        top:-10
    },
    onlineUser:{
        left:10
    },
    dayUser:{
        left:10,
        top:10
    },
    dayNetUser:{
        top:10
    },
    allRegisterUser:{
        top:20
    },
    icon:{
        height:80,
        width:80,
    },
    imageView:{
        flex:1
    },
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
    },
    navBar: {
        height: 64,
        backgroundColor: '#CCC'
    },
    row: {
        padding: 10,
        height: 44,
    },
    header:{
        height:40,
        justifyContent:'center',
        backgroundColor:'#F5F5F5'
    }
});